<template>
	<view class="all-order-page">
		<phoneSimuHead :titleTxt="titleTxt"></phoneSimuHead>
		<view class="tit-box">
			<view class="arrow-txt"><text class="icon-font" >&#xe604;</text></view>
			<view class="tit-txt">所有订单</view>
			<view class="c-txt">联系商家</view>
		</view>
		<view class="o-list-box phone-list">
			<view class="i-list" v-for="(item,index) in oderList" :key="index">
				<view class="no_txt">订单号：{{item.no}}</view>
				<view class="p-s-b">
					<text class="p-txt" :class="{'p-txt-r':item.payStatus == 0}">{{item.payStatusTxt}}</text>
					<text class="g-txt">|</text>
					<text class="o-s-txt">{{item.statusTxt}}</text>
				</view>
				<view class="gd-box">
					<image class="gd-img" :src="item.gdImg"></image>
					<view class="g-i-box">
						<view class="g-tit">{{item.gdName}}</view>
						<view class="g-p-c">
							<view class="p-t">￥{{item.price}}</view>
							<view class="p-c-t">￥{{item.price0}}</view>
						</view>
					</view>
					<view class="o-n-t">x{{item.num}}</view>
				</view>
				<view class="c-info-box">
					<view class="c-n-c">
						<view>姓名：{{item.c_name}}</view>
						<view>{{item.c_cellphone}}</view>
					</view>
					<view class="a-d-txt">
						<text class="a-d-lb" v-if="item.playType == 1">收货地址：</text>
						<text class="a-d-lb" v-else>取货地址：</text>
						<text class="a-d-lb">{{item.c_dreess}}</text>
					</view>
					<view class="ad-tip">
						<text class="icon-font" >&#xe607;</text>
						<text class="txt" >{{item.o_desc}}</text>
					</view>
				</view>
				
				<view class="msg-box">
					<view class="msg-lb">买家留言：</view>
					<view class="msg-txt">{{item.msg}}</view>
				</view>
				
				<view class="o-btn-box">
					<view class="m-der">
						<text class="icon-font" >&#xe63c;</text> 
						<text class="txt" >修改地址</text> 
					</view>
					<view class="o-c">取消订单</view>
					<view class="o-p" v-if="item.playType == 1">立即付款</view>
					<view class="o-p" v-else>兑换详情</view>
				</view>
			</view>
		</view>
		<view class="foot-box">
			<view class="tab-bar-box">
				<view class="tab-b">
					<view class="t-b-i">
						<image src="../../../static/images/icon-home-page.png"></image>
					</view>
					<view class="t-b-t ">
						<text>首页</text>
					</view>
				</view>
				<view class="tab-b">
					<view class="t-b-i">
						<image src="../../../static/images/menu04-s.png"></image>
					</view>
					<view class="t-b-t s-txt">
						<text>订单</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import phoneSimuHead from "@/components/interactive/appComponrnts/phone-simulation-head.vue";
	export default{
		components:{phoneSimuHead},
		data(){
			return{
				titleTxt:"",
				title:"所有订单",
				
				oderList:[
					{
						no:3215648131,
						payStatus : 1,
						payStatusTxt:"已付款  ",
						statusTxt:"未发货",
						status:0,
						gdName:"阿尔法蛋 词典笔X10 (示例)",
						gdImg:"https://cdn.imiyun.com/d/cp100/goods/e39f13831516d82d521661acd2a096e6.jpeg?x-oss-process=image/resize,m_lfit,w_480",
						price:636.65,
						price0:698.00,
						num:2,
						c_name:"李四",
						c_dreess:"中国广东省广州市天河区xxx路xxx号xx室",
						c_cellphone:"13812345678",
						o_desc:"订单已付款，如收货 信息有误，请联系商家更改",
						msg:"无",
						playType : 0,  //0：线下，1线上
					},
					{
						no:3215648132,
						payStatus : 0,
						payStatusTxt:"待支付剩余20分56秒",
						statusTxt:"未发货",
						gdImg:"https://cdn.imiyun.com/d/cp100/goods/a48fec08295a93e8f3259a2c10622fc0.png?x-oss-process=image/resize,m_lfit,w_480",
						gdName:"价格101礼品 (示例)",
						price:179.00,
						price0:199.00,
						num:2,
						c_name:"张三",
						c_dreess:"中国广东省广州市黄埔区xxx路xxx号xx室",
						c_cellphone:"13812345675",
						o_desc:"订单已付款，如收货 信息有误，请联系商家更改",
						msg:"无",
						playType : 1,  //0：线下，1线上
					},
					{
						no:3215648133,
						payStatusTxt:"已付款  ",
						statusTxt:"未发货",
						gdName:"米伊小姐 奶枣核桃仁 (示例)",
						gdImg:"https://cdn.imiyun.com/d/cp100/goods/3951c2f2e5f7b8f0efdb09402e92fbcf.jpeg?x-oss-process=image/resize,m_lfit,w_480",
						price:596,
						price0:698,
						num:2,
						c_name:"王五",
						c_dreess:"中国广东省广州市越秀区xxx路xxx号xx室",
						c_cellphone:"13812345672",
						o_desc:"订单已付款，如收货 信息有误，请联系商家更改",
						msg:"无",
						playType : 0, //0：线下，1线上
					},
				],
			}
		},
		created() {
			uni.$on('init_active_title',(data)=>{
				this.titleTxt = data;
			});
		},
		
		mounted() {
			
		},
		
		methods: {
		  
		},
	}
</script>

<style lang="scss">
	.all-order-page
	{
		width: 100%;
		height: 100%;
		position: relative;
		
		.tit-box
		{
			border-top:1upx solid #eee;
			background-color: #FFF;
			display: flex;
			padding: 20upx 20upx;
			text-align: center;
			align-items: center;
			justify-content: center;
			position: relative;
			color: #333;
			.arrow-txt
			{
				position: absolute;
				left: 20upx;
				font-size: 30upx;
			}
			
			.tit-txt
			{
				font-size: 30upx;
			}
			.c-txt
			{
				color:#f44848;
				position: absolute;
				right: 20upx;
			}
			
		}
		.o-list-box
		{
			width: 100%;
			height:calc(100% - 300upx) ;
			// margin: 20upx 0;
			// 
			.i-list
			{
				background-color: #FFF;
				padding: 20upx;
				margin-top:20upx;
				color: #333;
				padding-bottom: 120upx;
				.no_txt
				{
					
				}
				
				.p-s-b
				{
					.p-txt
					{
						color: #999;
					}
					.p-txt-r
					{
						color: #f44848;
					}
					.g-txt
					{
						padding: 0 10upx;
					}
					.o-s-txt
					{
						color: #666;
					}
				}
				.gd-box
				{
					padding:20upx;
					background-color: #EEE;
					display: flex;
					position: relative;
					.gd-img
					{
						width: 160upx;
						min-width: 160upx;
						height: 160upx;
						border-radius: 8upx;
					}
					.g-i-box
					{
						.g-tit
						{
							padding-left: 20upx;
							font-size: 30upx;
						}
						.g-p-c
						{
							display: flex;
							padding-left: 20upx;
							
							.p-t
							{
								font-size: 30upx;
								color: #f44848;
							}
							.p-c-t
							{
								color: #999;
								text-decoration: line-through;
								padding-top: 10upx;
								padding-left: 10upx;
							}
						}
					}
					.o-n-t
					{
						right: 20upx;
						position: absolute;
						bottom: 20upx;
					}
				}
		
				.c-info-box
				{
					border-bottom: 1upx solid #EEE;
					padding-top: 10upx;
					.c-n-c
					{
						display: flex;
						justify-content: space-between;
					}
					.ad-tip
					{
						padding: 10upx 0;
						color: #FF6600;
						.txt
						{
							padding-left: 10upx;
						}
					}
				}
				
				.msg-box
				{
					display: flex;
					padding: 10upx 0;
					border-bottom: 1upx solid #EEE;
					.msg-lb
					{
						min-width: 120upx;
					}
					.msg-txt
					{
						color: #999;
					}
				}
				
				.o-btn-box
				{
					padding: 20upx 0 0upx 0;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					.m-der
					{
						color: #FF6600;
						margin: 0 20upx;
						.txt
						{
							padding-left: 10upx;
						}
					}
					.o-c
					{
						color: #f44848;
						border: #f44848 solid 1upx;
						border-radius: 8upx;
						padding: 0 20upx;
						margin: 0 20upx;
					}
					.o-p
					{
						background-color:#f44848;
						color: #FFF;
						border-radius: 8upx;
						padding: 0 20upx;
						margin: 0 0 0 20upx;
					}
				}
				
			}
		}
		
		.foot-box
		{
			height: 120upx;
			width: 100%;
			position: absolute;
			bottom: 0;
			background-color: #FFF;
			border-top: 1upx solid #eee;
			.tab-bar-box
			{
				height: 100upx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 0;
				
				.tab-b
				{
					width: 50%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					height: 100%;
					.t-b-i
					{
						height: 60upx;
						width: 60upx;
						position: relative;
						image
						{
							height: 100%;
							width: 100%;
						}
					}
					.t-b-t
					{
						height: 24upx;
						color: #666;
					}
					.s-txt
					{
						color: #3388FF;
					}
				}
			}
		}
	}
</style>